/*
 * @Author: 姚泽毅
 * @Date: 2021-08-29 10:24:00
 * @LastEditTime: 2021-08-29 14:49:04
 */
import React, { Component } from 'react'
import { Input, message } from 'antd'
import axios from 'axios'
import "./index.css"
const { Search } = Input
export default class Header extends Component {
    searchUsers = (value) => {
        this.props.updateUsers({ isFirstLoad: false, isLoading: true, isErr: "", users: [] });
        let url = "https://api.github.com/search/users";
        let _this = this;
        axios.get(url, {
            params: {
                q: value
            }
        }).then(res => {
            if (res.status === 200) {
                _this.props.updateUsers({ users: res.data.items, isLoading: false })
            } else {
                _this.props.updateUsers({ isLoading: false, isErr: " 搜索失败！" });
                message.error("搜索失败！");
                console.log(res);
            }
        }, function (err) {
            _this.props.updateUsers({ isLoading: false, isErr: err.message });
            message.error("搜索失败！")
            console.log(err);
        })
    };
    render() {
        return (
            <div className="header">
                <h1>搜索GitHub用户</h1>
                <Search style={{ width: 600 }} onSearch={this.searchUsers} size="large" enterButton allowClear placeholder="input search user" />
            </div>
        )
    }
}
